<template>
    <div class="all">
       <header>
         <div class="div">
           <img src="../../../assets/返回.png" @click="back()" alt="">
           <span class="solid" @click="back()">返回</span>
         </div>
         <div class="div">
           <span>团队工作站</span>
         </div>
         <div class="div">
           <span class="solid"></span>
         </div>
       </header>
      <van-empty
        style="width: 100%;height: 60%"
        v-show="dataList.length <= 0"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无团队工作站"
      />
      <div class="box" v-for="item in dataList" @click="jump(item)">
        <p>
          <img class="jigouImg" src="../../../assets/团队机构.png" alt="">
          团队/机构
        </p>
        <p>
          <a >名称</a>：{{item.HOSPITAL_NAME}}
        </p>
        <p>
          <a >加入时间</a>：{{item.time}}
        </p>
      </div>
    </div>
</template>

<script>
export default {
  name: 'MechanismList',
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    back () {
      this.$router.history.go(-1)
    },
    jump (item) {
      this.$router.push({path: '/teamFunction', query: {id: item.id}})
    },
    getDataList () {
      this.$http.findUserHospital({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.dataList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
   header{
       width: 100%;
       height: 44px;
       display: flex;
       align-items: center;
       /*border-bottom: 1px solid #E5E5E5;*/
       background: white;
       position: sticky;
       top: 0;
       z-index: 9;
     }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     margin-right: 5px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
  .box{
    width: 95%;
    margin: 10px auto;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    background: white;
  }
  .jigouImg{
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
  .box p:nth-child(1) {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .box p {
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .box p a{
    text-align-last:justify;
    text-align:justify;
    text-justify:distribute-all-lines;   /*// 这行必加，兼容ie浏览器*/
    width: 60px;
  }
</style>
